<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>可以</div>
    <script src="./js/jquery.min.js"></script>
    <script>
        /* 
            JS 操作属性
                原生属性
                    设置
                        div.id = 'i1'
                        div.class = 'c1'
                    获取
                        console.log(div.id)
                        console.log(div.class)
                自定义属性
                    设置
                        div.setAttribute("wy","wenyuan")
                    获取
                        console.log(div.getAttribute("wy"))
                    删除
                        div.removeAttibute("wy")
                H5自定义属性
                    设置
                        div.dataset.wy = "wenyuan"
                    获取
                        console.log(div.dataset.wy)
                    删除
        */
        // let div = document.querySelector("div")
        // div.dataset.wy = 'wenyuan'
        // console.log(div.dataset.wy);

        // div.removeAttribute("data-wy")





        /* 
            Jquery操作属性
                prop    =>  操作元素
                    设置
                        $("div").prop("id",'i1') 
                    获取
                        console.log($("div").prop('id'))
                    删除
                        $("div").removeProp("id")
                attr  =>    自定义属性
                    设置
                        $("div").attr("id","i1")
                    获取
                        console.log($("div").attr("id"))
                    删除
                        $("div").removeAttr("id")
        */
        //JQ设置原生属性
        // $("div").prop("id",'i1') 

        //JQ prop设置自定义  => 不行
        // $("div").prop("wy",'wenyuan')

        //JQ prop的获取
        // $("div").prop("id",'ii')
        // console.log($("div").prop('id'));

        /* JQ prop的删除 */
        // $("div").prop("id",'ii')
        // $("div").removeProp("id") 
        // $("div").removeAttr("id")



        //JQ的attr  => 操作自定义属性
        //添加属性
        // $("div").attr("wy","wenyuan")
        
        //删除属性
        // $("div").attr("wy","wenyuan")
        // $("div").removeAttr("wy")
        
        //获取
        $("div").attr("wy","wenyuan")
        console.log($('div').attr("wy"))
    </script>
</body>
</html>